import { View } from "@tarojs/components";
import React from "react";
import classnames from "classnames";

type TBadgeProps = {
  children: React.ReactNode;
  num?: number | string;
  dot?: boolean;
};

const Badge: React.FC<TBadgeProps> = ({ children, num, dot = false }) => {
  return (
    <View className="relative">
      {children}
      {!dot ? (
        <View
          className={classnames(
            "absolute flex flex-row items-center justify-center text-white bg-red-500 rounded-full -top-[12px] -right-[12px] flex-nowrap ",
            typeof num === "string"
              ? "w-[36px] h-[28px] text-[18px]"
              : "w-[28px] h-[28px] text-[20px]"
          )}
        >
          {num}
        </View>
      ) : (
        <View className="absolute flex flex-row items-center justify-center text-white bg-red-500 rounded-full -top-[6px] -right-[12px] flex-nowrap w-[16px] h-[16px]"></View>
      )}
    </View>
  );
};

export default Badge;
